<template>
  <div class="my_div" @click="btn">
    <img   :src="imgUrl"/>
    <p :style="{color:colorRender}">{{dogName}} </p>
  </div >
</template>

<script>
export default {
  props:["imgUrl","dogName"],
  data() {
  return {
    list: ["red","blue","yellow","pink","green","blank"],
    colorRender:'',
   
  };
},
methods:{
btn(){
  let colorIndex=Math.floor(Math.random()*this.list.length)
  // console.log(colorIndex);
  // console.log(this.list[colorIndex]);
  this.colorRender=this.list[colorIndex]
  //触发安排父组件事件
  this.$emit("love" ,this.dogName)
}

}

};
</script>

<style>
.my_div {
  width: 200px;
  border: 1px solid black;
  text-align: center;
  float: left;
}

.my_div img {
  width: 100%;
  height: 200px;
}
</style>